<template>
  <!-- 基础资料 -->
  <BasicForm @register="register">
    <template #logo="{ model, field }">
      <ClipUploadImg v-model="model[field]" />
    </template>

    <template #address="{ model, field }">
      <ChooseAddress v-model="model[field]" />
    </template>
  </BasicForm>
</template>

<script setup lang="ts">
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { basicsInfoSchemas } from './schemas';
  // import { district } from '@/api/sys';
  // import { useMessage } from '@/hooks/web/useMessage';
  import { inject, watch } from 'vue';
  import { ClipUploadImg } from '@/components/Upload/index';
  import ChooseAddress from '@/components/ChooseAddress/index.vue';
  import { addOrUpdateOrg } from '@/api/institution/list';
  import { IAddOrUpdateOrgData } from '@/api/institution/model/listModel';
  import { useMessage } from '@/hooks/web/useMessage';
  import dayjs from 'dayjs';

  const dataId = inject('dataId');
  const props = defineProps({
    info: Object as PropType<IAddOrUpdateOrgData>,
  });

  watch(
    () => props.info,
    (val) => {
      if (val) {
        const { provinceId, cityId, areaId, provinceName, cityName, areaName } = val.orgBasicsInfo;
        setFieldsValue({
          ...val?.orgBasicsConfig,
          ...val?.orgBasicsInfo,
          provinces: [provinceId, cityId, areaId],
        });
        setProps({
          submitButtonOptions: {
            text: '保存',
          },
        });
        updateSchema({
          field: 'website',
          componentProps: {
            disabled: true,
          },
        });
        updateSchema({
          field: 'provinces',
          componentProps: {
            displayRenderArray: [provinceName, cityName, areaName],
          },
        });
      }
    },
  );

  const { createMessage } = useMessage();
  const schemas: FormSchema[] = basicsInfoSchemas();

  const emit = defineEmits(['nextStep']);

  const [register, { validate, setProps, setFieldsValue, updateSchema }] = useForm({
    schemas,
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 200,
    submitButtonOptions: {
      text: props.info ? '保存' : '保存并进入下一步',
    },
    submitFunc: async () => {
      try {
        const res = await validate();
        console.log(res, dataId);
        setProps({
          submitButtonOptions: {
            loading: true,
          },
        });
        let data: IAddOrUpdateOrgData = {
          orgBasicsConfig: {
            id: props.info?.orgBasicsConfig.id,
            orgCode: res.orgCode,
            orgType: res.orgType,
            website: res.website,
            validityTime: dayjs(res.validityTime).format('YYYY-MM-DD'),
          },
          orgBasicsInfo: {
            id: props.info?.orgBasicsInfo.id,
            orgName: res.orgName,
            orgAbbreviation: res.orgAbbreviation,
            address: res.address?.address,
            provinceId: res.provinces?.[0],
            cityId: res.provinces?.[1],
            areaId: res.provinces?.[2],
            details: res.details,
            email: res.email,
            latitude: res.address?.latitude,
            longitude: res.address?.longitude,
            logo: (Array.isArray(res.logo) && res.logo[0]) || res.logo,
            orgPicture: (Array.isArray(res.orgPicture) && res.orgPicture[0]) || res.orgPicture,
            officeTel: res.officeTel,
            contactsName: res.contactsName,
            contactsPhone: res.contactsPhone,
            industryId: res.industryId,
          },
        };
        try {
          let resData = await addOrUpdateOrg(data);
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          });
          createMessage.success('提交成功！');
          emit('nextStep', 1, resData?.id);
        } catch (error) {
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          });
        }

        // setTimeout(() => {
        //   setProps({
        //     submitButtonOptions: {
        //       loading: false,
        //     },
        //   });
        //   createMessage.success('提交成功！');
        //   emit('nextStep', 1, 889);
        // }, 2000);
      } catch (error) {}
    },
    resetFunc: async () => {
      props.info &&
        setFieldsValue({
          website: props.info?.orgBasicsConfig.website,
        });
    },
  });
</script>

<style scoped></style>
